<template>
  <div class="user-register-container">
     <van-nav-bar
      :title="$route.meta.title"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <van-cell-group>
      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('cellphone')}">
        <div class="van-cell__title"><span>手机号</span></div>
        <div class="van-cell__value">
          <input v-model="formFields.cellphone" v-validate="'required|min:11'" name="cellphone" type="text" placeholder="请输入手机号" class="van-field__control">
          <div v-if="errors.has('cellphone')" class="van-field__error-message">{{ errors.first('cellphone') }}</div>
        </div>
      </div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('account')}">
        <div class="van-cell__title"><span>用户名</span></div>
        <div class="van-cell__value">
          <input v-model="formFields.account" v-validate="'required|min:6'" name="account" type="text" placeholder="请输入用户名" class="van-field__control">
          <div v-if="errors.has('account')" class="van-field__error-message">{{ errors.first('account') }}</div>
        </div>
      </div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('password')}">
        <div class="van-cell__title"><span>密码</span></div>
        <div class="van-cell__value">
          <input v-model="formFields.password" v-validate="'required|min:6'" name="password" type="password" placeholder="请输入密码" class="van-field__control">
          <div v-if="errors.has('password')" class="van-field__error-message">{{ errors.first('password') }}</div>
        </div>
      </div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('safe_password')}">
        <div class="van-cell__title"><span>安全密码</span></div>
        <div class="van-cell__value">
          <input v-model="formFields['safe_password']" v-validate="'required|min:6'" name="safe_password" type="password" placeholder="请输入安全密码" class="van-field__control">
          <div v-if="errors.has('safe_password')" class="van-field__error-message">{{ errors.first('safe_password') }}</div>
        </div>
      </div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('captcha')}">
        <div class="van-cell__title"><span>验证码</span></div>
        <div class="van-cell__value">
          <input v-model="formFields.captcha" v-validate="'required|min:4'" name="captcha" type="text" placeholder="请输入验证码" class="van-field__control">
          <div v-if="errors.has('captcha')" class="van-field__error-message">{{ errors.first('captcha') }}</div>
        </div>
        <div class="van-field__button">
          <button v-if="!captcha.sendMsgDisabled" class="van-button van-button--primary van-button--small" @click="sendCaptcha"><span class="van-button__text">发送验证码</span></button>
          <button v-if="captcha.sendMsgDisabled" class="van-button van-button--primary van-button--small" disabled="disabled"><span class="van-button__text">{{captcha.time+'秒后获取'}}</span></button>
        </div>
      </div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('p_account')}">
        <div class="van-cell__title"><span>推荐人</span></div>
        <div class="van-cell__value">
          <input v-if="!isPAccount" v-model="formFields['p_account']" v-validate="'required|min:6'" name="p_account" type="text" placeholder="请输入推荐人" class="van-field__control">
          <input v-if="isPAccount" v-model="formFields['p_account']" v-validate="'required|min:6'" disabled="disabled" name="p_account" type="text" placeholder="请输入推荐人" class="van-field__control">
          <div v-if="errors.has('p_account')" class="van-field__error-message">{{ errors.first('p_account') }}</div>
        </div>
      </div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('is_agree')}">
        <div class="van-cell__value" style="font-size:0.6rem;text-align:left;">
          <label>
            <input v-model="formFields.is_agree" v-validate="'required'" name="is_agree" type="checkbox"/>
            <span>我已同意并阅读</span>
          </label>
          <a style="color:#faaf20" @click="clickOpenClause">《万福商城项目说明书》</a>
          <div v-if="errors.has('is_agree')" class="van-field__error-message">请同意《我已同意并阅读》</div>
        </div>
      </div>
      <van-button size="small" type="primary" :loading="onButtonLoading" @click="onSubmit" style="width: 100%;">注册</van-button>
    </van-cell-group>

    <van-cell-group v-if="isPAccount">
      <div class="van-cell van-cell--required van-hairline van-field">
        <div class="van-cell__title"><span>推广链接</span></div>
        <div class="van-cell__value">
          <input type="text" class="van-field__control" :value="config.referralLink+'?p_account='+formFields['p_account']">
        </div>
        <div class="van-field__button">
          <button @click="copyReferralLink" class="van-button van-button--primary van-button--small"  id="copyReferralLink" :data-clipboard-text="config.referralLink+'?p_account='+formFields['p_account']"><span class="van-button__text">复制</span></button>
        </div>
      </div>
    </van-cell-group>

    <van-cell-group v-if="isPAccount" style="text-align: center;">
      <div class="van-cell van-cell--required van-hairline van-field">推广二维码</div>
      <qriously :value="config.referralLink+'?p_account='+formFields['p_account']" :size="200" />
    </van-cell-group>
    
    <van-dialog
      v-model="showTradeDialog"
      show-confirm-button
      class="user-register-container-clause"
    >
      <Clause />
    </van-dialog>
  </div>
</template>

<script>
import qs from 'qs';
import Clipboard from 'clipboard';
import Vue from 'vue';
import { NavBar, Field, CellGroup, Button, Dialog, Toast } from 'vant';
import VueQriously from 'vue-qriously';
import ajaxVant from '../../utils/ajaxVant';
import config from '../../config';
import Clause from './clause';

Vue.use(Dialog);
Vue.use(VueQriously);

export default {
  components: {
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Clause.name]: Clause
  },
  data() {
    return {
      config,
      showTradeDialog: false,
      isPAccount: false,
      onButtonLoading: false,
      captcha: {
        time: 60,
        sendMsgDisabled: false
      },
      formFields: {
        cellphone: '',
        'p_account': '',
        account: '',
        password: '',
        'safe_password': '',
        captcha: '',
        level: 1,
        status: 1,
        captchaToken: ''
      }
    };
  },
  methods: {
    clickOpenClause() {
      this.showTradeDialog = true;
    },
    copyReferralLink() {
      var clipboard = new Clipboard('#copyReferralLink');
      clipboard.on('success', function(e) {
        console.log('ok');
        Toast('复制成功!');
        e.clearSelection();
      });
      clipboard.on('error', function(e) {
        Toast('复制失败!');
      });
    },
    sendCaptcha() {
      var _this = this;
      if (_this.formFields.cellphone !== null && _this.formFields.cellphone !== undefined && _this.formFields.cellphone !== '') {
        ajaxVant.get('/sendCaptcha?cellphone=' + _this.formFields.cellphone).then(function(data) {
          if (data !== false) {
            Toast(data.msg);
            _this.formFields.captchaToken = data.captcha_token;
            _this.captcha.sendMsgDisabled = true;
            const timer = setInterval(() => {
              if (_this.captcha.time > 0) {
                _this.captcha.time -= 1;
              } else {
                clearInterval(timer);
                _this.captcha.time = 60;
                _this.captcha.sendMsgDisabled = false;
              }
            }, 1000);
          }
        });
      } else {
        Toast('请输入手机号!');
      }
    },
    onSubmit() {
      var _this = this;
      _this.onButtonLoading = true;

      _this.$validator.validateAll().then((result) => {
        if (result) {
          ajaxVant.post('/user', qs.stringify(_this.formFields)).then(function(data) {
            if (data !== false) {
              Toast('注册成功,请联系领导人激活!');
              _this.formFields.cellphone = '';
              _this.formFields.account = '';
              _this.formFields.password = '';
              _this.formFields['safe_password'] = '';
              _this.formFields.captcha = '';
            }

            _this.onButtonLoading = false;
          });
        }
      });
    }
  },
  mounted() {
    if (this.$route.query.p_account !== null && this.$route.query.p_account !== undefined && this.$route.query.p_account !== '') {
      this.isPAccount = true;
      this.formFields['p_account'] = this.$route.query.p_account;
    }
  }
};

</script>

<style>
.user-register-container-clause {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: scroll;
  border-radius: 0px;
}
</style>